<template>
	<view class="fy-dropdown-floor">
		<scroll-view :scroll-y="true" style="height: 500rpx;">
			<!-- <view class="fy-dropdown-floor_item" v-for="(item, index) in options" :key="index">
				<img :src="'/static/images/new_tag01.png' || formatImgUrl" alt="" srcset="" class="tagicon">
				<text class="fy-dropdown-floor_title">{{ item.title }}</text>
				<view class="fy-dropdown-floor_ul">
					<text
						:class="['fy-dropdown-floor_li', selected[item.key] == cell.value ? 'fy-dropdown-floor_li__active' : '']"
						v-for="(cell, cellIndex) in item.list" :key="cellIndex"
						@click.stop.prevent="handlerCellClick(item.key, cell.value)">{{ cell.text }}</text>
				</view>
			</view> -->

			<view class="tip_wrap" v-for="(item,index) in options">
				<view class="header">
					<image :src="'/images/new_tag01.png' | formatImgUrl" alt="" srcset="">
						</image>
					<text class="title">
						{{item.title}}
					</text>
				</view>
				<view class="choose">
					<block v-if="item.tip == 'single'">
						单选且必选
					</block>
					<block v-if="item.tip == 'multi'">
						可多选
					</block>
					<block v-if="!item.tip">
						共选择<text>{{item.list.filter(item => item.selected).length}}</text>个标签
					</block>

				</view>
				<view class="wrap">
					<view class="tag" v-for="(items,indexs) in item.list" @click="selectedTag(item.list,indexs)"
						:class="items.selected ?'act':''">
						{{items.text}}
						<!-- <img :src="'/images/tag_close.png' | formatImgUrl" alt="" v-if="items.selected && item.tip != 'single'"
							@click.stop='deleteTag(item.list,indexs)'> -->
					</view>

				</view>
			</view>
		</scroll-view>
		<view class="fy-dropdown-button-list">
			<button class="fy-dropdown-button-item cancel-button" @click.stop.prevent="handlerCancel"><text
					class="fy-dropdown-button-text">重置</text></button>
			<!-- <text class="fy-dropdown-button-border-left"></text> -->
			<button class="fy-dropdown-button-item confirm-button" @click.stop.prevent="handlerConfirm"><text
					class="fy-dropdown-button-text">{{currentType == 1 ? '查找需求' : '查找橱窗'}}</text></button>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 选项数据，如果传入了默认slot，此参数无效
			options: {
				type: Array,
				default () {
					return []
				}
			},
			cancelColor: {
				type: String,
				default: '#999999'
			},
			confirmColor: {
				type: String,
				default: '#45C4B0'
			},
			current: {
				type: String,
				default: ''
			},
			currentType: {
				type: String,
				default: '1'
			},
		},
		data() {
			return {
				selected: {}, // 存储选中的值
				selectedItem: [], // 此为选中的标签数组
				_selected: false
			}
		},
		watch: {
			options: {
				immediate: true,
				deep: true,
				handler: function(list) {
					for (var i = 0, len = list.length; i < len; i++) {
						if (list[i]['key']) {
							this.$set(this.selected, list[i]['key'], list[i]['default']);
						}
					}
				}
			}
		},
		methods: {
			selectedTag(parentList, indexs) {
				// 获取父列表的索引
				const parentIndex = this.options.findIndex(item => item.list === parentList);
				console.log(indexs,parentIndex,123);

				// 标记选中的子项
				if(this.options[parentIndex].list[indexs].selected){
					if(this.options[parentIndex].tip != 'single'){
						this.deleteTag(parentList, indexs)
					}
				}else{
					this.$set(this.options[parentIndex].list[indexs], 'selected', true);
					if(this.options[parentIndex].tip == 'single'){
						this.options[parentIndex].list.forEach((ite,idx)=>{
							// if(idx == indexs){
								ite.selected = false
							// }
						})
						this.selectedItem= [this.options[parentIndex].list[indexs]]
						this.options[parentIndex].list[indexs].selected = true
					}else{
						this.options[parentIndex].list.filter(item => item.selected).map(item => {
							this.selectedItem.push(item)
						});
					}
					
					
					const uniqueSelectedItems = [...new Set(this.selectedItem)];
					this.selectedItem = uniqueSelectedItems.filter(item => item.selected)
				}
				
			},
			deleteTag(parentList, indexs) {
				// const parentIndex = this.list.findIndex(item => item.list === parentList);
				// this.$set(this.list[parentIndex].list[indexs], 'selected', false);
				const parentIndex = this.options.findIndex(item => item.list === parentList);

				// 获取要删除的子项
				const itemToDelete = this.options[parentIndex].list[indexs];
				console.log('itemToDelete', itemToDelete);
				// 在 this.selectedItem 中过滤掉要删除的子项
				let selectedItem = this.selectedItem.filter(item => item.text == itemToDelete.text);

				this.selectedItem = selectedItem.filter(item => item.selected)
				console.log('x->', this.selectedItem);
				// 清除该子项的 'selected' 标记
				this.$set(this.options[parentIndex].list[indexs], 'selected', false);

				console.log(this.options, 'this.$set');
			},

			handlerCellClick(key, data) {
				this.$set(this.selected, key, data);
			},
			handlerCancel() {
				this.options.forEach((item,index) => {
					
					item.list.forEach((ite,idx)=>{
						ite.selected = false
					})
				})
				this.$emit('finish', {
					cancel: true,
					value: this.current,
					data: JSON.parse(JSON.stringify(this.options))
				})
				
				
				this.$emit('success', {
					cancel: true,
					type: 'column',
					data: JSON.parse(JSON.stringify(this.options))
				})
			},
			handlerConfirm() {
				console.log(this.selectedItem, 'this.selectedItem');
				
				if(this.current == 2){
					let amount = []
					this.options[1].list.forEach((item,index) => {
						if(item.selected){
							amount.push(item.value)
						}
					})
					
					let word = "";
					this.options[0].list.forEach((item,index) => {
						if(item.selected){
							word = item.value;
						}
					})
					
					if(!word){
						this.$common.errorToShow('请选择价格单位')
						return
					}
					if(amount.length == 0){
						this.$common.errorToShow('请选择价格范围')
						return
					}
				}
				
				this.$emit('finish', {
					confirm: true,
					value: this.current,
					data: JSON.parse(JSON.stringify(this.options))
				})

				try {
					this.$emit('success', {
						confirm: true,
						type: 'column',
						data: JSON.parse(JSON.stringify(this.selectedItem))
					})
				} catch (err) {
					this.$emit('success', {
						confirm: true,
						type: 'column',
						data: JSON.parse(JSON.stringify(this.selectedItem))
					})
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.fy-dropdown-floor /deep/.uni-scroll-view-content{
		flex-direction: column;
	}
	
	// 定义混入指令，用于在非nvue环境下的flex定义，因为nvue没有display属性，会报错
	@mixin vue-flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}

	// @include vue-flex;

	.fy-dropdown-floor {
		padding: 30rpx;
		padding-bottom: 0;
		padding-top: 0;
		background-color: #ffffff;
		// border-top: 1px solid #f2f2f2;
	}

	.fy-dropdown-floor_item {
		margin-top: 42rpx;
	}

	.fy-dropdown-floor_title {
		font-size: 30rpx;
		color: #333333;
		padding-top: 30rpx;
		padding-bottom: 6rpx;
		margin-left: 40rpx;
		font-weight: bold;
	}

	.fy-dropdown-floor_ul {
		@include vue-flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 0 40rpx 0 20rpx;
	}

	.fy-dropdown-floor_li {
		border: 1px solid #EFEFEF;
		height: 52rpx;
		line-height: 49rpx;
		text-align: center;
		padding: 0 28rpx;
		border-radius: 26rpx;
		background-color: #EFEFEF;
		color: #999999;
		font-size: 26rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}

	.fy-dropdown-floor_li__active {
		border-color: #45C4B0;
		color: #45C4B0;
		background-color: #ffffff;
	}


	.fy-dropdown-button-list {
		@include vue-flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		// border-top: 1px solid #f6f6f6;
	}

	.fy-dropdown-button-item {
		@include vue-flex;
		align-items: center;
		justify-content: center;
		// flex: 1;
		// height: 100rpx;
		// background-color: #ffffff;
		// border-radius: 0;
		// border-width: 0rpx;

		/* #ifndef APP-NVUE */
		&::after {
			border: none;
		}

		/* #endif */
	}

	.fy-dropdown-button-text {
		font-size: 30rpx;
	}

	.fy-dropdown-button-border-left {
		width: 1px;
		height: 100rpx;
		background-color: #f2f2f2;
		transform: scaleX(0.7);
	}

	// 10.16新增
	.cancel-button {
		width: 107px;
		height: 36px;
		border-radius: 20px;
		opacity: 1;
		background: rgba(216, 216, 216, 0.3) !important;
		font-family: Source Han Sans CN;
		font-size: 14px;
		font-weight: bold;
		color: #999999;
	}

	.confirm-button {
		width: 226px;
		height: 36px;
		border-radius: 20px;
		opacity: 1;
		background: #45C4B0 !important;
		font-family: Source Han Sans CN;
		font-size: 14px;
		font-weight: bold;
		color: #FFFFFF;
	}

	.tagicon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 12rpx;
		object-fit: contain;
	}

	.tip_wrap {
		width: 100%;
		padding-top: 30rpx;
		margin-bottom: 60rpx;

		.header {
			display: flex;
			align-items: center;

			img {
				width: 36rpx;
				height: 36rpx;
				margin-right: 12rpx;
				object-fit: contain;
			}
			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 12rpx;
				object-fit: contain;
			}
			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #3D3D3D;


			}

			.more {
				border-radius: 24rpx;
				padding: 6rpx 20rpx;
				box-sizing: border-box;
				border: 1px solid #45C4B0;
				font-size: 24rpx;
				color: #45C4B0;
				text-align: center;
				margin-left: auto;
			}
		}

		.choose {
			margin-bottom: auto;
			font-size: 24rpx;
			font-weight: normal;
			color: #999999;
			margin-top: 8rpx;
		}

		.wrap {
			margin-top: 30rpx;
			display: grid;
			grid-gap: 28rpx 24rpx;
			justify-content: space-between;
			grid-template-columns: repeat(auto-fill, 210rpx);

			.act {
				background: rgba(69, 196, 176, 0.07) !important;
			}

			.tag {
				width: 214rpx;
				height: 80rpx;
				border-radius: 8rpx;

				background: rgba(216, 216, 216, 0.3);
				position: relative;
				font-size: 28rpx;
				text-align: center;
				line-height: 80rpx;
				color: #3D3D3D;

				img {
					width: 20rpx;
					height: 20rpx;
					object-fit: contain;
					position: absolute;
					top: 8rpx;
					right: 8rpx;
				}
			}
		}
	}
</style>